<template>
    <div id="Networkpoint">
        <el-card>
            <el-row :gutter="10">
                <el-col :span="3">
                    <el-select v-model="province" placeholder="请选择" @change="change1">
                        <el-option v-for="item in Province" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="city" placeholder="请选择" @change="change2">
                        <el-option v-for="item in arr.City" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="district" placeholder="请选择">
                        <el-option v-for="item in arr.District" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="search">查询结果</el-button>
                </el-col>
            </el-row>
            <collapse :Name="arr.Name" :Location="Location" />
        </el-card>

    </div>
</template>

<script>
import { mapState } from 'vuex';
import collapse from './collapse.vue';
export default {
    components: { collapse },
    name: "Networkpoint",
    data() {
        return {
            Location: "",
            province: '',
            city: '',
            district: '',
            arr: {
                City: [],
                District: [],
                Name: []
            }

        }
    },
    mounted() {
        this.$store.dispatch('getProvince')
    },
    computed: {
        ...mapState({
            Province: (state) => state.Province
        })
    },
    methods: {
        async change1() {
            console.log(this.province);
            try {
                let { arr: res } = await this.$API.reqCity(this.province)
                this.arr.City = res
            } catch (error) {
                console.log("失败");
            }
        },
        async change2() {
            try {
                let { arr: res } = await this.$API.reqDistrict(this.city)
                this.arr.District = res
            } catch (error) {
                console.log("失败");
            }
        },
        async search() {
            try {
                let { results: res } = await this.$API.reqName(this.district)
                console.log(res);
                this.arr.Name = res
                this.Location = this.city
            } catch (error) {
                console.log("失败");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#Networkpoint {
    width: 70%;
    margin:0 auto;
    .el-card{
        height: 800px;
    }
}
</style>
